9.3k 词
Axios二次封装Axios是什么?定义 Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 特性 从浏览器创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 超时处理 查询参数序列化支持嵌套项处理 自动将请求体序列化为: JSON (application/json) Multipart / FormData (multipart/form-data) URL encoded form (application/x-www-form-urlencoded) 将 HTML Form 转换成 JSON 进行请求 自动转换JSON数据 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间) 为 node.js ...
1.2k 词
构建DOM树什么是Dom 从页面的视角来看,DOM 是生成页面的基础数据结构。 从 JavaScript 脚本视角来看,DOM 提供给 JavaScript 脚本操作的接口,通过这套接口,JavaScript 可以对 DOM 结构进行访问,从而改变文档的结构、样式和内容。 从安全视角来看,DOM 是一道安全防护线,一些不安全的内容在 DOM 解析阶段就被拒之门外了 渲染引擎还有一个安全检查模块叫 XSSAuditor,是用来检测词法安全的。在分词器解析出来 Token 之后,它会检测这些模块是否安全,比如是否引用了外部脚本,是否符合 CSP 规范,是否存在跨站点请求等。如果出现不符合规范的内容,XSSAuditor 会对该脚本或者下载任务进行拦截。详细内容我们会在后面的安全模块介绍,这里就不赘述了 Dom树如何生成在渲染引擎内部,有一个叫HTML 解析器(HTMLParser)的模块,它的职责就是负责将 HTML 字节流转换为 DOM 结构。 详细流程 浏览器判断响应头中的 content-type 字段 创建渲染进程,网络进程和渲染进程之间会建立一个共享数据的管道 渲染进...
1.6k 词
浏览器缓存——强缓存和协商缓存为了减轻服务器的压力,http提供了一个叫做缓存的解决方案。当数据没有发生变化时,浏览器每次都从缓存中读取数据,但是这样有个问题就是浏览器怎么知道服务器何时更新了资源。于是我们把缓存添加了一个有效时间,只要缓存过期,浏览器就会重新向服务端发起请求,这个缓存有效的时间主要由服务端设置。 强缓存(本地缓存)概念不需要跟服务器进行通信,直接使用本地缓存的资源 相关的header字段 **expires**: 缓存过期时间, 一个未来时间,代表资源何时无效 缺点: 这种方法有个弊端就是当服务器时间和浏览器端的时间不同步时,就会导致一些错误,于是出现了下面的改进方法: **cache-control(http1.1)**: 这种方法采用相对时间的方式,有效时间从浏览器端收到响应结果开始生效 max-age:代表在这个请求正确返回的时间的一段时间内再次加载资源,就会命中强缓存。 no-cache:不使用本地缓存,向浏览器发送新鲜度校验请求 no-store:禁止缓存浏览器数据,也禁止保存至临时文件中,每次都重新请求 public:任何情况下都缓存(即使是...
5.6k 词
前言​ 前端开发中处理对象和数组时,我们经常会碰到数据拷贝的情景,如果出现一些不恰当的拷贝就会导致一些难以预料的错误,难以排查与维护。拷贝又常常分为深拷贝和浅拷贝,因此弄清楚两者的概念及区别尤为重要。 举个简单例子: ​ 相信大家对于这种表格并不陌生,在操作栏会有一个显示详细数据的功能,这需要实现一个数据回显的功能用于显示详细数据。 ​ 如果这里通过回显数据 = 表格数据 直接赋值就会出现一个问题,当我在回显数据上使用了修改功能后,哪怕没有选择确定或者保存,外面表格的数据都会发生变化。 这种就是典型的浅拷贝带来的问题,对拷贝数组做出的更改有时会影响到源数组。注意这里的有时,后文会介绍为什么。 引言 我们先来看个最简单的拷贝: 123const a = 10;cosnt b = a;console.log(b); 毫无疑问,输出结果是10。 为了深入理解拷贝这一过程,我们需要研究数据在内存中的存储方式。 对于上面的基本数据类型(number)的存储,js会采用值类型栈存储的方式直接把a的值拷贝给b。 值类型栈存储: 主要针对(Num...
779 词
javascript的垃圾回收机制背景JavaScript 是使用垃圾回收的语言,也就是说**执行环境**负责在代码执行时管理内存。在` C `和` C++`等 语言中,跟踪内存使用对开发者来说是个很大的负担,也是很多问题的来源。JavaScript 为开发者卸下 了这个负担,通过**自动内存管理**实现内存分配和闲置资源回收。 实现思路 基本思路很简单:确定哪个变量不会再 使用,然后释放它占用的内存。这个过程是周期性的,即垃圾回收程序每隔一定时间(或者说在代码执 行过程中某个预定的收集时间)就会自动运行。垃圾回收过程是一个近似且不完美的方案,因为某块内存是否还有用,属于“不可判定的”问题,意味着靠算法是解决不了的 垃圾回收程序必须跟踪记录哪个变量还会使用,以及哪个变量不会再使用,以便回收 内存。如何标记未使用的变量也许有不同的实现方式。不过,在浏览器的发展史上,用到过两种主要的标记策略:`标记清理`和`引用计数`。 实现方法标记清除法(常用)首先它会遍历堆内存上所有的对象,分别给它们打上标记,然后在代码执行过程结束之后,对所使用过的变量取消标记。在清除阶段再把具有标记的...
1.6k 词
TypeScript类型体操 TypeScript是一个带有类型的JavaScript 明确了类型以后,那自然可以想到类型和所做的操作要匹配才行,这就是为什么要做类型检查,如果能保证对某种类型只做该类型允许的操作,这就叫做类型安全,所以类型检查是为了保证类型安全的。 类型检查可以在运行时做,也可以运行之前的编译期做。这是两种不同的类型,前者叫做动态类型检查,后者叫做静态类型检查。 动态类型检查 在源码中不保留类型信息,对某个变量赋什么值、做什么操作都是允许的,写代码很灵活。只有代码运行时才会出现报错,具有很大的安全隐患 静态类型检查则是在源码中保留类型信息,声明变量要指定类型,对变量做的操作要和类型匹配,会有专门的编译器在编译期间做检查。 动态类型只适合简单的场景,对于大项目却不太合适,因为代码中可能藏着的隐患太多了 静态类型虽然会增加写代码的成本,但是却能更好的保证代码的健壮性,减少 Bug 率 大型项目注定会用静态类型语言开发。 JavaScript 是一门动态类型语言,TypeScript 是一门静态类型语言 为什么 TypeScript 类型编程被...
643 词
TS内置的高级和工具类型Parameters 获取函数参数类型 获取函数参数类型 1234567const func = (name: string):number => { return 0;}type funcParam = Parameters<typeof func>; // type funcParam = [name: string] 底层原理: 1234567891011121314```## ReturnType 获取函数返回值类型> 获取函数返回值类型``` typescriptconst func = (name: string):number => { return 0;}type funcParam = ReturnType<typeof func>; // type funcParam = number ...
981 词
XSS攻击——跨站脚本攻击 存储型XSS攻击 将脚本通过评论区或帖子等形式,注入到原网站服务器,当其它用户获取该帖子或者评论时,就会从服务器中拿到该病毒脚本,如果是该脚本是打开攻击者的网站,那攻击者就能拿到用户的登录凭证等信息。 反射型XSS攻击 利用原网站对js的自动处理,比如使用url上的资源路径渲染,或者document.write()执行的一些操作 Dom型XSS攻击 黑客通过各种手段将恶意脚本注入用户的页面中,比如通过网络劫持在页面传输过程中修改 HTML 页面的内容,这种劫持类型很多,有通过 WiFi 路由器劫持的,有通过本地恶意软件来劫持的,它们的共同点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据 解决方法: 对代码进行过滤、转义 cookie使用 httpOnly 禁止js获取cookie 使用CSP设置请求头或者meta标签 CSRF攻击——跨站请求伪造 CSRF 英文全称是 Cross-site request forgery,所以又称为“跨站请求伪造”,是指黑客引诱用户打开黑客的网站,在黑客的网站中,...
127 词
Lint JavaScript/TypeScript 规范。主流的 Lint 工具包括 Eslint、Prettier; 样式开发规范。主流的 Lint 工具包括Stylelint、Prettier; Git 提交规范。主流的 Lint 工具包括Commitlint。
1.6k 词
npm安装依赖过程查找npm配置信息首先检查根目录下的.npmrc文件,如果没有再检查全局的.npmrc文件,最后检查npm的默认配置信息。 构建依赖树 首先查找package-lock.json文件,如果有就直接使用它的依赖树 如果没有则递归查找每个依赖需要的依赖 2.x 是全部循环遍历递归下载所有依赖,可能会出现node_modules 黑洞现象 3.x 是进行扁平化处理,碰到新的依赖会尝试放到第一层,如果后续碰到版本不一的依赖,则下载到相应的依赖下,问题是:不同的依赖遍历顺序会出现不一样的依赖安装结果 5.x 新增了 package-lock.json 锁文件 根据依赖树到缓存或者远程仓库去下载依赖资源过程中会有完整性校验 生成 packge-lock.json 文件npm的缓存机制在用户本地会有缓存 index-v5 content-v2 content-v2 文件是用来存在缓存包的具体内容,index-v5 是用来存储依赖包的索引,根据 index-v5 中的索引去 content-v2 中查找具体的源文件 。 ​ npm 在安装依赖的过程中,...